<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import ReCol from "@/components/ReCol";
import { FormProps } from "../logic/types";
import { rules, initValues } from "../logic/form";

const { t } = useI18n();

const props = withDefaults(defineProps<FormProps>(), {
  formData: () => initValues(),
  roleList: null,
  deptTreeList: null
});

const formRef = ref();
const formData = ref(props.formData);
const isAdmin = formData.value.username === "admin";

const getRef = () => formRef.value;
defineExpose({ getRef });
</script>

<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="82px">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="t('sys.userPage.form.username')" prop="username">
          <el-input
            v-model="formData.username"
            show-word-limit
            maxlength="20"
            :disabled="isAdmin"
            clearable
            :placeholder="t('sys.userPage.form.placeholder.username')"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="t('sys.userPage.form.realName')" prop="realName">
          <el-input
            v-model="formData.realName"
            show-word-limit
            maxlength="20"
            clearable
            :placeholder="t('sys.userPage.form.placeholder.realName')"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="t('sys.userPage.form.deptId')" prop="deptId">
          <el-cascader
            v-model="formData.deptId"
            class="w-full"
            :options="deptTreeList"
            :props="{
              value: 'id',
              label: 'name',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            filterable
            :placeholder="t('sys.userPage.form.placeholder.deptId')"
          >
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="t('sys.userPage.form.roleIds')" prop="roleIds">
          <el-select
            v-model="formData.roleIds"
            class="w-full"
            multiple
            :disabled="isAdmin"
            :placeholder="t('sys.userPage.form.placeholder.roleIds')"
          >
            <el-option
              v-for="item in props.roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="t('sys.userPage.form.phone')" prop="phone">
          <el-input
            v-model="formData.phone"
            show-word-limit
            maxlength="20"
            clearable
            :placeholder="t('sys.userPage.form.placeholder.phone')"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="t('sys.userPage.form.email')" prop="email">
          <el-input
            v-model="formData.email"
            show-word-limit
            maxlength="50"
            clearable
            :placeholder="t('sys.userPage.form.placeholder.email')"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
